<template>
  <div class="music-list">
    <MusicItem v-for="(item,index) in songList" :key="index" :item="item" :index="index" :playSongId="playSongId" @playMusic="playMusic"></MusicItem>
  </div>
</template>
<script>
import MusicItem from './MusicItem.vue'
export default {
  props: ['apiUrl', 'playSongId'],
  data () {
    return {
      songList: []
    }
  },
  components: {MusicItem},
  mounted: function () {
    console.log(this.apiUrl)
    this.setSongList()
  },
  methods: {
    setSongList: function () {
      let that = this
      this.$axios.get(this.apiUrl).then(function (response) {
        console.log(response)
        that.songList = response.data.songlist
      })
    },
    playMusic: function (obj) {
      this.$router.app.$children[0].playList = this.songList
      this.$emit('playMusic', obj)
    }
  }
}
</script>
<style scoped>

</style>
